<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>
<script type="text/html" id="photos-item-tpl">
    <li id="saved-image{id}">
        <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
        <input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
               style="width: 200px;" title="图片名称">
        <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
             onclick="imagePreviewDialog(this.src);">
        <a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
        <a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
    </li>
</script>
<script type="text/html" id="files-item-tpl">
    <li id="saved-file{id}">
        <input id="file-{id}" type="hidden" name="file_urls[]" value="{filepath}">
        <input class="form-control" id="file-{id}-name" type="text" name="file_names[]" value="{name}"
               style="width: 200px;" title="文件名称">
        <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>
        <a href="javascript:uploadOne('文件上传','#file-{id}','file');">替换</a>
        <a href="javascript:(function(){$('#saved-file{id}').remove();})();">移除</a>
    </li>
</script>
<!--select多选开始-->
<link rel="stylesheet" href="__STATIC__/js/selectpicker/css/bootstrap-select.min.css">
<script src="__STATIC__/js/selectpicker/js/bootstrap-select.min.js"></script>
<script src="__STATIC__/js/selectpicker/js/defaults-zh_CN.min.js"></script>
<!--select多选结束-->
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('Free/index')}">免费聊吧列表</a></li>
        <li class="active"><a href="#">免费聊吧添加</a></li>
    </ul>
    <form action="{:url('Free/addPost')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="row">
            <div class="col-md-9">
                <table class="table table-bordered">
                    <tr>
                        <th width="150">标题<span class="form-required">*</span></th>
                        <td>
                            <input class="form-control" type="text" name="title" required  placeholder="请输入标题"/>
                        </td>
                    </tr>
                    <tr>
                        <th>类型<span class="form-required">*</span></th>
                        <td>
                            <select class="form-control" name="type" id="type_id" style="width:200px;">
                                <option value="">请选择类型</option>
                                <foreach name="type" item="vo" key="key">
                                    <option value="{$key}">{$vo}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>球队对战</th>
                        <td>
                            <input type="hidden" name="bat_ids" value="" id="bat_ids">
                            <select class="selectpicker form-control" id="bat_id" style="width:500px;"  multiple data-live-search="false">
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>预测比分</th>
                        <td id="pre_result">

                        </td>
                    </tr>
                    <tr>
                        <th>内容<span class="form-required">*</span></th>
                        <td>
                            <script type="text/plain" id="content" name="content"></script>
                        </td>
                    </tr>
                </table>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
                        <a class="btn btn-default" href="{:url('Free/index')}">{:lang('BACK')}</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    $(function () {

        editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('content');
        try {
            editorcontent.sync();
        } catch (err) {
        }

        //球队对战联动
        $('#type_id').on('change',function(){
            var type_id = $(this).children('option:selected').val();
            $.ajax({
                type: 'GET',
                url: "/admin/home/getBatMatch",
                data: {
                    'type_id': type_id,
                },
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                    var html = '';
                    $.each(data['bat'],function(i,val){
                        html += '<option value="'+val['bat_id']+'">'+val['bat_name']+'</option>';
                    });
                    $('#bat_id').html(html);
                    $('#bat_id').selectpicker("refresh");
                    $('#bat_id').selectpicker("render");
                }
            });
            $('#bat_ids').val('');
            $('#pre_result').html('');
        });

        //多选选中事件
        $('#bat_id').on('changed.bs.select',function(e){
            //选中的value值，会自动添加到数组中[1,2,3]
            var appliesAll = $(this).val();
            //追加预测结果选项
            if(appliesAll != null){
                var len = appliesAll.length;
                var html = '';
                for(var i=0;i<len;i++){
                    html +='<span>比分：</span>';
                    html +='<input class="form-control" type="number" min="0" max="999" name="main_score[]"  style="width:70px;display:inline;" required value="0"> : ';
                    html +='<input class="form-control" type="number" min="0" max="999" name="pass_score[]"  style="width:70px;display:inline;margin-right: 20px;" required value="0">';
                }
                //排序由大到小
                appliesAll = appliesAll.sort(function(a,b){
                    return b-a;
                });
                $('#bat_ids').val(appliesAll);
                $('#pre_result').html(html);
            }else{
                $('#bat_ids').val('');
                $('#pre_result').html('');
            }
        });

        //获取table宽度,动态设置selectpicker的宽度
        var width = $('table').width();
        $(".selectpicker").selectpicker({
            width:width*0.85
        });

    });
</script>
</body>
</html>
